<template>
	<view class="comment">
		<navbar title="选手点评" bgcolor="#6252DF" txcolor="#ffffff"></navbar>
		<view class="nav" :style="{ top: sysHeight+50+'px' }">
			<!-- <view class="search acea-row row-middle row-center themecolor">
				<text class="iconfont icon-sousuoxiao"></text>
				<input type="text" placeholder="请输入姓名" placeholder-class="themecolor fs28" v-model="keywords" />
			</view> -->
<!-- 			<view class="select">
			    <uni-data-select
			      v-model="value"
			      :localdata="range"
			      @change="change"
			    ></uni-data-select>
			</view> -->
			
			<!-- titleArr: 选择项数组 dropArr: 下拉项数组 二维数组 @finishDropClick: 下拉筛选完成事件-->
			<cc-dropDownMenu 
				:titleArr="titleArr" 
				:dropArr="dropArr" 
				@finishDropClick="finishClick">
			</cc-dropDownMenu>              
			  
			<view class="acea-row row-middle cate">
				<view class="item" :class="type==0?'on':''" @tap="typeClick(0)">
					<text>未点评</text>
					<text class="tag on" v-if="countArray.count1">{{ countArray.count1 }}</text>
				</view>
				<view class="item" :class="type==1?'on':''" @tap="typeClick(1)">
					<text>已点评</text>
					<text class="tag" v-if="countArray.count2">{{ countArray.count2 }}</text>
				</view>
				<view class="refresh acea-row row-middle row-center" @click="empty">
					<text class="iconfont icon-31shuaxin"></text>
					<text>刷新</text>
				</view>
			</view>
		</view>
		<view style="width: 100%;height: 230rpx;"></view>
		<view class="list px30">
			<block v-for="(item,index) in prolist" :key="index">
				<view class="item p30">
					<view class="acea-row row-between-wrapper">
						<view class="acea-row row-middle">
							<view class="avatar">
								<image class="imgwh" :src="item.avatar" mode=""></image>
							</view>
							<view class=" ml20">
								<view class="fs32 fc333">{{ item.title }}</view>
								<view class="fs32 fc666 mt10">{{ item.phone }}</view>
							</view>
						</view>
						<view class="btn" v-if="type==0" @click="dianping(item.baoming_id,item.avatar)">点评</view>
						<view class="btn" v-else >已点评</view>
					</view>
	<!-- 				<view class="acea-row row-middle mt30">
						<view>总评委5位/已有3位点评：</view>
						<view class="ava acea-row row-middle">
							<view class="avai">
								<image class="imgwh" src="https://yuchengpic.oss-cn-hangzhou.aliyuncs.com/img/002.png" mode=""></image>
							</view>
							<view class="avai">
								<image class="imgwh" src="https://yuchengpic.oss-cn-hangzhou.aliyuncs.com/img/002.png" mode=""></image>
							</view>
							<view class="avai">
								<image class="imgwh" src="https://yuchengpic.oss-cn-hangzhou.aliyuncs.com/img/002.png" mode=""></image>
							</view>
							<view class="avai">
								<image class="imgwh" src="https://yuchengpic.oss-cn-hangzhou.aliyuncs.com/img/002.png" mode=""></image>
							</view>
						</view>
					</view> -->
				</view>
			</block>
		</view>
		
		<view class='loadingicon acea-row row-center-wrapper fs26 themecolor' v-if="prolist.length>0">
			<text class='loading iconfont icon-jiazai' :hidden='loading==false'></text>{{loadTitle}}
		</view>
		
		<pageonone v-if="prolist.length==0"></pageonone>

	</view>
</template>

<script>
	import{
		xuanshouList,
		getroomList,
		getzhuanyeList,
		getageList
	} from '@/api/other.js'
	let sysHeight = uni.getSystemInfoSync().statusBarHeight;
	import navbar from '../../components/navbar.vue';
	import pageonone from '../../components/pagenone.vue';
	export default {
		components:{
			navbar,
			pageonone
		},
		data() {
			return {
				sysHeight: sysHeight,
				type:0,
				page:1,
				limit:10,
				prolist:[],
				loadend: false,
				loading: false,
				loadTitle: this.$t(`加载更多`),
				huodong_id:'',
				keywords:'',
				countArray:[],
				dafenList:[],
				
				titleArr: ['房间号', '年龄段', '专业分组'],
				dropArr:[
					[],[],[]
				],
				room_id:'',
				zhuanye_id:'',
				age_id:'',
				
				
			};
		},
		onLoad(option) {
			this.huodong_id = option.id
		},
		onShow(){
			this.getroomList();
			this.getageList();
			this.getzhuanyeList();
			this.type = 0;
			this.empty();
		},
		watch:{
			keywords(){
				this.empty();
			}
		},
		methods:{
			finishClick(res){
				let that = this;
				console.log(res);
				let list = res;
				that.room_id = list[0];
				that.age_id = list[1];
				that.zhuanye_id = list[2];
				that.empty();
			},
			getroomList(){
				let that = this;
				getroomList({ huodong_id: that.huodong_id }).then(res=>{
					let list = res.data.data;
					let arr = [];
					list.forEach((item)=>{
						let str = { text:'',value:'' }
						str.text = item.roomName;
						str.value = item.id;
						arr.push(str)
					})
					console.log('arr',arr);
					that.dropArr[0]=arr;
					console.log('****',that.dropArr);
				})
			},
			getageList(){
				let that = this;
				getageList({ huodong_id: that.huodong_id }).then(res=>{
					let list = res.data.data;
					let arr = [];
					list.forEach((item)=>{
						let str = { text:'',value:'' }
						str.text = item.zuName;
						str.value = item.id;
						arr.push(str)
					})
					console.log('arr',arr);
					that.dropArr[1]=arr;
					console.log('****',that.dropArr);
				})
			},
			getzhuanyeList(){
				let that = this;
				getzhuanyeList({ huodong_id: that.huodong_id }).then(res=>{
					let list = res.data.data;
					let arr = [];
					list.forEach((item)=>{
						let str = { text:'',value:'' }
						str.text = item.zhuanyeName;
						str.value = item.id;
						arr.push(str)
					})
					that.dropArr[2]=arr;
					console.log('****',that.dropArr);
				})
			},

			empty(){
				this.loadend = false;
				this.loading = false;
				this.page = 1;
				this.prolist = [];
				this.getlist();
			},
			getlist(){
				let that = this;
				if (that.loadend) return;
				if (that.loading) return;
				let data = {
					page: that.page,
					limit: that.limit,
					huodong_id: that.huodong_id,
					type: that.type,
					keywords: that.keywords,
					room_id: that.room_id,
					age_id: that.age_id,
					zhuanye_id: that.zhuanye_id
				}
				uni.showLoading({
					title:'加载中'
				})
				xuanshouList(data).then(res=>{
					uni.hideLoading();
					that.countArray = res.data.countArray;
					that.dafenList = res.data.dafenList;
					let list = res.data.data;
					let prolist = that.$util.SplitArray(list, that.prolist);
					let loadend = list.length < that.limit;
					that.loadend = loadend;
					that.loading = false;
					that.loadTitle = loadend ? that.$t(`没有更多内容啦~`) : that.$t(`加载更多`);
					that.$set(that, 'prolist', prolist);
					that.$set(that, 'page', that.page + 1);
				}).catch(err=>{
					uni.hideLoading();
					that.loading = false;
					that.loadTitle = that.$t(`加载更多`);
				})
			},
			dianping(baoming_id,avatar){
				uni.navigateTo({
					url: `/pages/home/comment-details?baoming_id=${baoming_id}&avatar=${avatar}`
				})
			},
			typeClick(val){
				this.type = val;
				this.keywords = '';
				this.empty();
			}
		},
		onReachBottom() {
			this.getlist();
		}
	}
</script>

<style lang="scss">
	.comment{
		
		.select{
			padding: 30rpx 30rpx 20rpx 30rpx;
		}	
		
		.nav{
			position: fixed;
			left: 0;
			right: 0;
			width: 100%;
			background-color: #f2f2f2;
			padding-bottom: 30rpx;
			z-index: 999;
			
			.search{
				width: 690rpx;
				height: 88rpx;
				background: rgba(98, 82, 223, 0.08);
				border: 1rpx solid #6252DF;
				border-radius: 44rpx;
				margin: 30rpx auto;
				
				input{
					margin-left: 10rpx;
					margin-right: -140rpx;
				}
			}
			.cate{
				padding: 10rpx 30rpx 0 50rpx;
				
				.item{
					color: #666666;
					font-size: 32rpx;
					margin-right: 150rpx;
					line-height: 60rpx;
					position: relative;
					
					&.on{
						color: #6252DF;
						border-bottom: 4rpx solid #6252DF;
					}
					.tag{
						width: 88rpx;
						height: 40rpx;
						border-radius: 20rpx;
						color: #ffffff;
						font-size: 24rpx;
						text-align: center;
						line-height: 40rpx;
						position: absolute;
						top: 0;
						right: -90rpx;
						background: #6252DF;
						
						&.on{
							background: #FF4040;
						}
					}
				}
				
				.refresh{
					width: 140rpx;
					height: 60rpx;
					border-radius: 30rpx;
					background: rgba(98, 82, 223, 0.15);
					color: #6252DF;
					font-size: 26rpx;
				}
				
			}
			
		}
		
		.list{
			
			.item{
				width: 690rpx;
				border-radius: 28rpx;
				background: #FFFFFF;
				margin-bottom: 30rpx;
				
				.avatar{
					width: 88rpx;
					height: 88rpx;
					overflow: hidden;
					border-radius: 50%;
				}
				
				.btn{
					width: 200rpx;
					height: 72rpx;
					border-radius: 80rpx;
					background: rgba(98, 82, 223, 0.2);
					color: #6252DF;
					font-size: 32rpx;
					text-align: center;
					line-height: 72rpx;
				}
				.avai{
					width: 48rpx;
					height: 48rpx;
					border-radius: 50%;
					overflow: hidden;
					position: relative;
					border: 2rpx solid #FFFFFF;
				}
				.avai~.avai{
					margin-left: -10rpx;
				}
				
			}
			
		}
		
	}
</style>
